<template>
  <div v-if="inEdit" class="property-line-weight-div">
    <el-select v-model="data" placeholder="*多种*" popper-class="select-popper" @change="onChange">
      <el-option
        v-for="item in selectOptions"
        :key="item.key"
        :label="item.label"
        :value="item.value"
      >
        <line-weight-item :index="item.key" :value="item.value" :label="item.label" />
      </el-option>
    </el-select>
  </div>
  <div v-else class="no-edit-text">
    <div v-if="data === null || data === undefined">{{ label }}</div>
    <line-weight-item v-else :index="getKey(data)" :value="data" :label="getLabel(data)" />
  </div>
</template>

<script>
import props from '../mixins/props'
import LineWeightItem from './line-weight-item'

export default {
  name: 'PropertyLineWeight',
  components: { LineWeightItem },
  mixins: [props],
  props: {
    // 可选项列表
    // 格式: [ {value, label} ]
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 当前选择值
      data: undefined,
      // 与options一致,但value被转换成字符串类型!!!
      selectOptions: [],
      // value与item之间的映射(内部使用)
      // 格式: { value: {value, label }}
      selectOptionMap: {}
    }
  },
  computed: {
    label: function() {
      if (typeof this.data === 'string') {
        if (this.selectOptionMap.hasOwnProperty(this.data)) {
          return this.selectOptionMap[this.data].label
        } else {
          return '*多种*'
        }
      } else {
        return '*多种*'
      }
    }
  },
  watch: {
    value(val) {
      this.data = this.getData(val)
    }
  },
  created() {
    // 初始化列表
    this.init()
    // 设置data的初始值
    this.data = this.getData(this.value)
    // console.log('list created:', this.data, typeof this.data)
  },
  methods: {
    getData(val) {
      if (val) {
        if (!this.selectOptionMap.hasOwnProperty(val)) {
          // if (this.options.length > 0) {
          //   this.data = this.options[0].value.toString()
          // }
          return undefined
        } else {
          return val
        }
      } else {
        return undefined
      }
    },
    init() {
      let key = 0
      this.options.forEach(item => {
        // js object会自动将key变成字符串
        const value = item.value.toString() // value都转换为string
        if (!this.selectOptionMap.hasOwnProperty(value)) {
          this.selectOptionMap[value] = {
            key: key,
            label: item.label
          }
          this.selectOptions.push({
            key: key,
            value: value,
            label: item.label
          })
        }
        key = key + 1
      })
      // console.log('-->init:', this.selectOptionMap)
    },
    getKey(value) {
      if (this.selectOptionMap.hasOwnProperty(value)) {
        return this.selectOptionMap[value].key
      } else {
        return 0
      }
    },
    getLabel(value) {
      if (this.selectOptionMap.hasOwnProperty(value)) {
        return this.selectOptionMap[value].label
      } else {
        return 'ByLayer'
      }
    },
    onChange(val) {
      // 更新data数据
      // this.data = val
      // 向父组件发送change消息
      this.$emit('change', JSON.stringify(val))
    }
  }
}
</script>

<style lang="scss">
.property-line-weight-div {
  .el-select {
    width: 100% !important;
  }
}
</style>
